<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HotCss</title>
</head>

<body>
  <div id="root"></div>
  <template id="hotCssStyle">
    <style id="hotCssStyleInline" media="(width < 500px)">
      .box {
        background-color: #3498db;
      }
    </style>
    <script>
      console.log("evaluate");
      // jump available
      /**
       * @type {HTMLButtonElement}
       */
      const button = document.getElementById("change-color-btn-inline");
      /**
       * @type {HTMLElement}
       */
      const box = document.querySelector(".box");

      button.addEventListener("click", () => {
        // 直接修改 style 属性中的 background-color
        // 同样，因为 background-color 不影响布局，所以只会触发重绘
        box.attributeStyleMap.set("background-color", "#9b59b6"); // 改为紫色
      });
    </script>

    <div class="box">我是一个盒子</div>
    <button id="change-color-btn-inline">改变颜色</button>
  </template>
  <script>
    /**
     * @type {HTMLElement}
     */
    const root = document.getElementById("root");
    /**
     * @type {HTMLTemplateElement}
     */
    const hotCssStyle = document.getElementById("hotCssStyle");

    clone
    root.appendChild(document.importNode(hotCssStyle.content, true));

    // cut
    // root.appendChild(document.adoptNode(hotCssStyle.content, true));
  </script>
</body>

</html>